<template>
  <div class="container">
    <!-- 页头 -->
    <el-page-header @back="$router.push('/home')" content="详情页面">
    </el-page-header>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 题目查询和修改 -->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
            placeholder="请输入查询题号"
            v-model="queryInfo.query"
            class="input-with-select"
            @keyup.enter.native="getProb"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getProb"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="$router.push('/prob')"
            >添加题目</el-button
          >
        </el-col>
      </el-row>

      <!-- 题目列表 -->
      <el-table :data="currentProbList" border>
        <el-table-column label="题号" prop="probId"> </el-table-column>
        <el-table-column label="题名" prop="probTitle"> </el-table-column>
        <el-table-column label="创建时间" prop="createdAt"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="$router.push('/prob/' + scope.row.probId)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 1, 5, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="probListLen"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  // 进入题目列表页面后自动获取后台数据
  created() {
    const InspireCloud = require("@byteinspire/js-sdk");
    const myServiceId = "qcqsjd";
    const fnName = "prob_require";

    // 创建轻服务实例
    const inspirecloud = new InspireCloud({
      serviceId: myServiceId,
    });
    // 调用轻服务函数
    inspirecloud
      .run(fnName, {
        token: window.sessionStorage.getItem("token"),
      })
      .then((data) => {
        this.probList = data;
        this.currentProbList = data;
        this.probListLen = data.length;
        this.updateCurrentList();
      })
      .catch((error) => {
        // 处理异常
      });
  },
  data() {
    return {
      queryInfo: { query: "", pagenum: 1, pagesize: 10 },
      probList: [],
      currentProbList: [],
      probListLen: 0,
    };
  },
  methods: {
    updateCurrentList() {
      this.currentProbList = this.probList.slice(
        (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
        this.queryInfo.pagenum * this.queryInfo.pagesize
      );
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.updateCurrentList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.updateCurrentList();
    },
    getProb() {
      console.log(this.queryInfo.query);
      // this.currentProbList = [this.probList[parseInt(this.queryInfo.query)]];
      this.currentProbList = [this.probList[this.queryInfo.query]];
      if (this.queryInfo.query == "") this.currentProbList = this.probList;
    },
  },
};
</script>

<style lang="less" scoped>
</style>